<template>
	<view class="home">
		<view class="cu-custom" style="height: 100upx;line-height: 100upx;">
			<view class="cu-bar bg-bgcolor fixed" :style="{ height: wanlsys.height + 'px', paddingTop: wanlsys.top + 'px' }">
				<view class="action" @tap="$wanlshop.back(1)"><text class="wlIcon-fanhui1"></text></view>
				<view class="content" :style="{top: wanlsys.top + 'px'}">{{to_member.nickname}}</view>
			</view>
		</view>
		
		<view class="content " id="content" :style="{ height: style.contentViewHeight + 'px' , paddingTop: wanlsys.top + 'px'}" style="overflow: hidden;">
			<scroll-view
				id="scrollview"
				class="chat-window"
				scroll-y="true"
				:style="{ height: style.contentViewHeight + 'px' }"
				:scroll-with-animation="true"
				:scroll-top="scrollTop"
			>
				<!-- <view class="chat-window"> -->
				<!-- 聊天内容 -->
				<view class="content-all">
					<!-- 聊天窗口 -->
					<view v-for="(item, index) in chat" :key="index" class="m-item zdh_box_scroll_dl">
						<!-- 收信人 -->
						<view class="talk-text talk-left" v-if="user.id == item.to_id">
							<!-- 收信人头像 -->
							<view class="talk-photo dd_l"><image :src="$wanlshop.oss(item.to_avatar, 35, 35, 2, 'avatar')" class="talk-img"></image></view>
							<!-- 收信人消息 -->
							<view class="talk-content dd_r">
								<view class="talk-huge"></view>
								<view class="talk-title dd_r_r" v-if="item.type==1">{{ item.message }}</view>
								<view class="talk-title dd_r_r" v-if="item.type==2">
									<image :src="item.message"  mode="aspectFit" style="width: 160upx;height: 160upx;" @click="previewImage(item.message)"></image>
								</view>
							</view>
							<view class="dd_time">{{ $wanlshop.timeToDate(item.createtime) }}</view>
						</view>
						<view class="talk-text talk-right" v-if="user.id == item.from_id">
							<!-- 发信人消息 -->
							<view class="talk-content dd_r">
								<view class="talk-title dd_r_r" v-if="item.type==1">{{ item.message }}</view>
								<view class="talk-title dd_r_r" v-if="item.type==2">
									<image :src="item.message" mode="aspectFit" style="width: 160upx;height: 160upx;" @click="previewImage(item.message)"></image>
								</view>
								<view class="talk-huge"></view>
							</view>
							<!-- 发信人头像 -->
							<view class="talk-photo dd_l"><image :src="$wanlshop.oss(user.avatar, 35, 35, 2, 'avatar')" class="talk-img"></image></view>
							<view class="dd_time">{{ $wanlshop.timeToDate(item.createtime) }}</view>
						</view>
					</view>
				</view>
				<!-- </view> -->
			</scroll-view>
		</view>
		<view class="zdh_box_input">
			<image src="../../static/images/new/upimg.png" mode="" @tap="getImage()"></image>
			<!-- <input type="text" placeholder="发送留言内容" /> -->
			<textarea
			    auto-height="true"
				v-model="message"
				placeholder="发送留言"
				@input="inputtext"
				placeholder-style="font-size:30upx;padding-top:14upx;"
				style="line-height: 36upx;min-height: 60upx;"
				class="uni-input"
				cursor-spacing="15"
			/>
			<view class="send" @click="sendText">发送</view>
			
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	data() {
		return {
			wanlsys: this.$wanlshop.wanlsys(),
			chat: [], //动态列表数据
			userid: 0,
			style: {
				pageHeight: 0,
				contentViewHeight: 0,
				footViewHeight: 90,
				mitemHeight: 0
			},
			scrollTop: 0,
			old: { scrollTop: 0 },
			scrollToView: '',
			to_member:[],
			message:'',
		};
	},
	created() {
		
		const res = uni.getSystemInfoSync(); //获取手机可使用窗口高度     api为获取系统信息同步接口
		this.style.pageHeight = res.windowHeight;
		this.style.contentViewHeight = res.windowHeight - (uni.getSystemInfoSync().screenWidth / 750) * 100 - 50; //像素   因为给出的是像素高度 然后我们用的是upx  所以换算一下
		setTimeout(() => {
			this.scrollToBottom(res);
		}, 800);
		 //创建后调用回到底部方法
	},
	computed: {
		...mapState(['user'])
	},
	onLoad(option) {
		this.userid = option.uid;
		this.loadData();
	},

	methods: {
		async loadData() {
			this.$api.get({
				url: '/wanlshop/nutrition/chat',
				data: {
					userid: this.userid
				},
				success: res => {
					this.chat = res.list;
					this.to_member = res.to_member;
				}
			});
		},
		Tofind(id) {
			uni.navigateTo({
				url: '/pages/find/details/details?id=' + id
			});
		},
		/**
		 * @author gongliying
		 * @date 2019-07-26
		 * @information 跳转页面底部
		 */
		// 滚动至聊天底部
		scrollToBottom: function(res) {
			let that = this;
			let query = uni.createSelectorQuery();
			query.selectAll('.m-item').boundingClientRect();
			query.select('#scrollview').boundingClientRect();
			query.exec((res) => {
				that.style.mitemHeight = 0;
				console.log(that.style.mitemHeight);
				res[0].forEach(rect => (that.style.mitemHeight = that.style.mitemHeight + rect.height + 40)); //获取所有内部子元素的高度 // 因为vue的虚拟DOM 每次生成的新消息都是之前的，所以采用异步setTimeout    主要就是添加了这红字
				setTimeout(() => {
					if (that.style.mitemHeight > that.style.contentViewHeight - 20) {
						//判断子元素高度是否大于显示高度
						that.scrollTop = that.style.mitemHeight - that.style.contentViewHeight; //用子元素的高度减去显示的高度就获益获得序言滚动的高度
					}
				}, 500);
			});
		},
		inputtext(e){
			this.message=e.detail.value;
		},
		// 发送文字消息
		async sendText() {
			var that=this;
			if(this.message==''){
				this.$wanlshop.msg('请填写留言');
				return false;
			}
			that.$api.post({
				url: '/wanlshop/nutrition/send',
				data: {
					userid: this.userid,
					message: this.message,
					type:1,
				},
				success: rest => {
					that.message="";
					this.loadData();
					setTimeout(() => {
						this.scrollToBottom();
					}, 500);
				}
			});
			
		},
		
		async sendImage(imageurl) {
			var that=this;
			that.$api.post({
				url: '/wanlshop/nutrition/send',
				data: {
					userid: this.userid,
					message: imageurl,
					type:2,
				},
				success: rest => {
					this.loadData();
					setTimeout(() => {
						this.scrollToBottom();
					}, 500);
				}
			});
			
		},
		
		//选照片 or 拍照
		getImage() {
			var that = this;
			uni.chooseImage({
			    sourceType: ["camera", "album"],
			    sizeType: "compressed",
			    count: 1,
			    success: res => {
					this.$api.get({
						url: '/wanlshop/common/uploadData',
						success: updata => {
							console.log(res.tempFilePaths[0]);
							// 读取图片宽高
							uni.getImageInfo({
								src: res.tempFilePaths[0],
								success: image => {
									this.$api.upload({
										url: updata.uploadurl,
										filePath: image.path,
										name: 'file',
										formData: updata.storage == 'local' ? null : updata.multipart,
										success: data => {
											console.log(data);
											that.sendImage(data.fullurl);
										}
									});
								}
							});
						}
					});
			    }
			})
		},
		previewImage(image) {
			console.log(1111);
			var images = [];
			images.push(image);
			uni.previewImage({
				urls: images,
				current: image,
			});
		},
		
	
	}
};
</script>

<style>
page,
.home {
	height: 100%;
	overflow: hidden;
}
</style>
<style lang="scss" scoped>
.zdh_box_scroll_dl {
	padding: 10upx 30upx;
	.talk-left {
		display: flex;
		justify-content: flex-start;
		margin-bottom: 40upx;
		padding-bottom: 40upx;
		position: relative;
		.dd_time {
			position: absolute;
			bottom: 0;
			left: 0;
			padding-left: 110upx;
			font-size: 22upx;
			font-weight: 400;
			color: #9f9f9f;
		}
		.dd_l {
			width: 88upx;
			height: 88upx;
			border-radius: 50%;
			overflow: hidden;
			image {
				border-radius: 50%;
				width: 100%;
				height: 100%;
			}
		}
		.dd_r {
			display: flex;
			flex-direction: row;
			margin-left: 20upx;
			width: 425upx;
			display: flex;
			.dd_r_r {
				padding: 24upx;
				overflow: hidden;
				border-radius: 10upx;
				margin-left: 2upx;
				height: auto;
				font-weight: 400;
				background: #ffffff;
				border-radius: 20upx;
				font-size: 28upx;
				font-weight: 400;
				color: #000000;
				line-height: 36upx;
			}
			.dd_r_l {
				margin-top: 20upx;
				width: 25upx;
				height: 25upx;
				font-size: 30upx;
				color: #ffffff;
			}
		}
	}
	.talk-right {
		display: flex;
		justify-content: flex-end;
		margin-bottom: 40upx;
		padding-bottom: 40upx;
		position: relative;
		.dd_time {
			position: absolute;
			bottom: 0;
			right: 0;
			padding-right: 110upx;
			font-size: 22upx;
			font-weight: 400;
			color: #9f9f9f;
		}
		.dd_l {
			width: 88upx;
			height: 88upx;
			border-radius: 50%;
			image {
				width: 100%;
				border-radius: 50%;
				height: 100%;
			}
		}
		.dd_r {
			display: flex;
			flex-direction: row-reverse;
			width: 425upx;
			display: flex;
			margin-right: 20upx;
			.dd_r_r {
				background: #4177e5;
				padding: 24upx;
				height: auto;
				overflow: hidden;
				border-radius: 10upx;
				font-size: 28upx;
				font-weight: 400;
				color: #ffffff;
				line-height: 36upx;
			}
			.dd_r_l {
				margin-top: 20upx;
				width: 25upx;
				height: 25upx;
				font-size: 30upx;
				color: #a4cdff;
				margin-left: -9upx;
				margin-right: 8upx;
			}
		}
	}
}
.zdh_box_input {
	min-height: 110upx;
	background: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 30upx;
	textarea {
		width: 460upx;
		overflow-y: hidden; 
		background: #f6f6f6;
		border-radius: 4px;
		padding: 0 24upx;
		font-size: 30upx;
		font-weight: 400;
	}
	
	.send{
		height: 60upx;
		line-height: 60upx;
		width: 100upx;
		text-align: center;
	}
	image {
		width: 52upx;
		height: 52upx;
		margin-right: 39upx;
	}
}
</style>
